<template>
  <div class="boxs">
    <div @click="jumpPage" v-for="item, index in list" :class="`ms-box ms-box` + index">
      <img class="bgImg" :src="item.imgBg" alt="">
      <div class="ms-box-img">
        <img :src="item.url" alt="">
      </div>
      <div class="ms-box-text">
        <div truncated class="text1">{{ item.text1 }}</div>
        <div truncated class="text2">{{ item.text2 }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import imgurl from '@/assets/img/box1-1.png';
import imgurl1 from '@/assets/img/box2-1.png';
import imgurl2 from '@/assets/img/box3-1.png';
import imgBg from '@/assets/img/box1.png'
import imgBg1 from '@/assets/img/box2.png'
import imgBg2 from '@/assets/img/box3.png'
import { useRouter } from 'vue-router';
const props = defineProps({
  url: String,
  message: Number
})
const list = [
  {
    url: imgurl,
    text1: '直播话术',
    text2: '根据直播的商品，自动生成直播话术',
    bgClass: 'ms-box',
    imgBg: imgBg,
  },
  {
    url: imgurl1,
    text1: '种草文案',
    text2: '根据产品和主流新媒体平台特点，为您自动生成种草文案',
    bgClass: 'ms-box',
    imgBg: imgBg1,
  },
  {
    url: imgurl2,
    text1: '电商广告',
    text2: '自动为您生成适用于不同平台的电商广告',
    bgClass: 'ms-box',
    imgBg: imgBg2,
  }
]
const router = useRouter()
const jumpPage = () =>{
  router.push('/table/detail')
}
</script>
<style></style>
<style  lang="scss">
.ms-title{
  line-height:50px;
}
.boxs {
  height: 198px;
}

.ms-box {
  display: inline-block;
  width: calc(100% / 3 - 20px);
  height: 100%;
  margin-right: 30px;
  position: relative;

  .bgImg {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
  }

  &-img {
    position: relative;
    width:120px;
    display:inline-block;
    left: 10px;
    top: 50px;
    z-index: 2;
  }


  &-text {
    position: relative;
    width:calc(100% - 120px);
    display:inline-block;
    top: 30px;
    z-index: 2;
   

    .text1 {
      color: #fff;
      font-size: 36px;
      font-weight: 600;
      margin-right:10px;
      overflow: hidden;
text-overflow:ellipsis; white-space: nowrap;
    }

    .text2 {
      margin-right:10px;
      color: #fff;
      font-size: 18px;
       white-space: wrap;
    }

  }

  &:last-child {
    margin-right: 0px;
  }

}

.ms-box0 {
  /* background-image: url(@/assets/img/box1.png); */
}

.ms-box1 {
  /* background-image: url(@/assets/img/box2.png); */
}

.ms-box2 {
  /* background-image: url(@/assets/img/box3.png); */
}
</style>
